<template>
    <div>

      <el-menu  class="el-menu-demo" mode="horizontal" >

        <el-image
          style="width: 120px; height: 40px ; float: left;margin-left: 10%;margin-top: 10px"
          src="https://sf1-scmcdn-tos.pstatp.com/goofy/bcy/image/logo-home.fff267.png">
        </el-image>

        <div style="margin-left: 2%;width: 300px ; float: left">
          <el-input placeholder="搜索COS、视频、用户..." v-model="input" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>


        <el-menu-item index="3" style="margin-left: 26%;float: left" ><i class="el-icon-house"></i>首页</el-menu-item>
        <el-menu-item index="4"><i class="el-icon-bell"></i>消息</el-menu-item>

        <div>
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="float: left"></el-avatar>
        </div>

        <el-button type="danger" style="float: left;margin-left: 2%"><i class="el-icon-edit-outline"></i>发布</el-button>

      </el-menu>


      <el-table
        ref="multipleTable"
        :data="likeDeatils"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="shopName"
          label="商品名称"
          width="300">
        </el-table-column>
        <el-table-column
          prop="shopDesc"
          label="商品描述"
          width="500">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="250">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.pic"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.row.id)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="deleteAllMyLike">取消收藏</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </div>
</template>

<script>

  import axios from 'axios'

    export default {
        name: "mylike",
      data() {
        return {
          likeDeatils: [],
          multipleSelection: '',
          input:''
        }
      },
      methods: {
        handleSelectionChange(val) {
          this.multipleSelection='';

         for (var i=0;i<val.length;i++){
           console.log(val[i].id)
           this.multipleSelection=this.multipleSelection+(val[i].id).toString()+","
         }
        },
        findAllMyLike:function () {
          axios.get("http://localhost/bcy-shop/shop/findAllMyLike").then(res=>{
            if (res.data.code==200){
              this.likeDeatils=res.data.data
            }
          })
        },
        deleteRow:function (id) {
          axios.post("http://localhost/bcy-shop/shop/deleteMylike",{id:id}).then(res=>{
            if(res.data.code==200){
              alert(res.data.message)
              this.findAllMyLike();
            }
          })
        }, toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },deleteAllMyLike:function () {
          axios.post("http://localhost/bcy-shop/shop/deleteAllMylike",{idlist:this.multipleSelection}).then(res=>{
            if (res.data.code==200){
              alert(res.data.message)
              this.findAllMyLike();
            }
          })}
      },mounted() {
        this.findAllMyLike();
      }
    }
</script>

<style scoped>

</style>
